<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>发起一场Chat</title>
</head>
<link rel="stylesheet" type="text/css" href="../styles/index.css">
<script type="text/javascript">
	(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '20px';
                }else{
                    docEl.style.fontSize = 20 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<body>
	<div class="warp">
		<section class="markChat">
			<form>
				<div class="markBox">
					<div class="markLi mb">
						<p class="title">文章题目/分享主题</p>
						<input type="text" class="input" name="">
						<span class="msg"><i>0</i>/30</span>	
					</div>
					<div class="markLi mb">
						<p class="title">内容介绍</p>
						<textarea class="textarea" placeholder="你将分享的话题是什么 ？有哪些部分？请详细说明。（介绍越详细，越有可能赢得更多读者。）"></textarea>
						<span class="msg"><i>0</i>/350</span>	
					</div>
					<div class="markLi slogo">
						<a href="">
							<img src="../images/temp/logo1.jpg">
							<p class="name">小罗</p>
							<span class="click"></span>	
						</a>
					</div>
				</div>

				<div class="markBox">
					<div class="markLi radioName">
						<p class="stitle">分享形式</p>
						<div class="fr">
							<label class="active"><input name="Fruit" type="radio" checked="checked" value="" />微信群分享</label> 
							<label><input name="Fruit" type="radio" value="" />语言直播分享</label>
						</div>
					</div>
					<p class="msg">交流活动开始前，工作人员将和您进行详细沟通。</p>
					<div class="markLi radioChange">
						<p class="stitle">是否有交流</p>
						<div class="fr">
							<label class="active"><input name="change" class="hasChange" type="radio" checked="checked"/>是</label> 
							<label><input name="change" class="notChange" type="radio" />否</label>
						</div>
					</div>
					<div class="markLi radioTime">
						<p class="stitle">交流时长</p>
						<div class="fr">
							<label><input name="time" type="radio" value="" />30分钟</label> 
							<label class="active"><input name="time" type="radio" checked="checked" value="" />60分钟</label>
							<label><input name="time" type="radio" value="" />90分钟</label> 
						</div>
					</div>
					<div class="markLi">
						<p class="stitle">读者上限</p>
						<div class="fr">
							<select>
							  <option value ="10人">10人</option>
							  <option value ="20人">20人</option>
							  <option value="30人">30人</option>
							  <option value="40人">40人</option>
							</select>
						</div>
						
					</div>
					<p class="msg">预订人数达到读者上限的50%，方可进行写作和分享。</p>
					<div class="markLi inputNum">
						<p class="stitle">订阅费</p>
						<div class="fr">
							<input type="text" name="">
							<span>元</span>
						</div>
					</div>
					<p class="msg">您的最终收益=预定人数X订阅数X90%;收益获取时间：交流完成后的3个工作日内。</p>
				</div>

				<div class="markBox">
					<div class="msgA">
						<p>预订截止日期：2017年5月16日</p>
						<p>交稿截止日期：2017年5月26日</p>
						<p>交流截止日期：2017年6月16日</p>
					</div>
					<div class="msgB">
						如未在以上日期前达到预订人数，完成交稿以及交流，本活动募集的款项将会数退还给读者。
					</div>
					<div class="msgC">
						<input class="checkbox" type="checkbox" value="" />我已阅读并同意<a href="">《GitChat平台写作（线上）协议》</a>
					</div>
					<p class="clickBox"><button>写好了</button></p>
				</div>			
			</form>
		</section>
		
		<footer class="footer">
			<nav class="nav">
				<ul>
					<li class="active">
						<a href="">
							<span class="navA"></span>
							<p>发现</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navB"></span>
							<p>圈子</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navC"></span>
							<p>阅读</p>
						</a>
					</li>
					<li>
						<a href="">
							<span class="navD"></span>
							<p>我</p>
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	</div>
</body>
<script src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function(){
		$('label').click(function(){
			$(this).addClass('active').siblings().removeClass('active');
		});

		$('.input').bind('input oninput', function() {
			var len=$(this).val().length;
		    $(this).next('span').find('i').html(len);
		});

		$('.textarea').bind('input oninput', function() {
			var len=$(this).val().length;
		    $(this).next('span').find('i').html(len);
		});

		$('.notChange').click(function(){
			$('.radioTime').hide()
		});

		$('.hasChange').click(function(){
			$('.radioTime').show()
		})

	})
</script>
</html>